<template>
  <div class="home-container">
    <van-nav-bar
  title="头条新闻"
  fixed
  placeholder
/>
<!-- 刷新套加载，无比熟悉的操作 -->
<van-pull-refresh v-model="isRefreshing" @refresh="onRefresh" loading-text="刷新中..." success-text="刷新成功">

<!-- 不加placeholder，暂时还不算是第三方组件的内部元素，无需deep
     加了placeholder，则变成了内部组件，需要deep -->
    <van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
 @load=" onload"
 :error.sync="error"
 error-text="加载失败，请重试！"
 offset="0"
 :immediate-check="false"
>
<Article-item v-for="item in list" :key="item.art_id"
:title="item.title"
:id="item.art_id"
:comm_count="Number.parseInt(item.comm_count)"
:pubdate="item.pubdate"
:author="item.aut_name"
:cover="item.cover"
></Article-item>
    </van-list>

</van-pull-refresh>

  </div>
</template>

<script>
import ArticleItem from '@/components/articleItem.vue'
// 获取请求方法
// import home from '@/api/home/list.js'
import { getList } from '@/api/home/list.js'

export default {
  name: 'Home',
  components: {
    ArticleItem
  },
  data () {
    return {
      list: [],
      // list所需
      page: 0,
      limit: 5, // 根据需求自行设置
      loading: false,
      finished: false,
      error: false,
      // refresh所需
      isRefreshing: false
    }
  },
  methods: {
    async getTheList () {
      try {
        this.page++
        const { data } = await getList(this.page, this.limit)
        this.list = data
      } catch (err) {
        console.log(err)
      }
    },
    async onload () { // 加载更多的实际执行函数
      // 默认情况下，list组件有一个属性immediate-check，是为true，表示首次进入界面即触发一次onload
      // console.log('loading-before', this.loading)
      // console.log('page', this.page)
      // 说明已经划到底部，loading为true
      // 通过实验得知，并不完全是划到底部就出发的，距离底部还有一段距离就触发load事件了,官方文档给出的默认值是300px，可以修改offset来修改
      // 所以你如果不更新list直接测试的话会一股脑把数据都请求过来，一直触发请求
      try {
        // 更新一下error，让它返回默认值
        this.error = false
        const { data } = await getList(this.page + 1, this.limit)
        if (data.length !== 0) {
          this.page++
          data.forEach(element => {
            this.list.push(element)
          })
          this.loading = false
        } else {
          this.finished = true
          this.$notify({ type: 'success', message: '全部加载完成' })
        }
        // 更新完列表之后，马上把loading状态复原为false
        // console.log('loading-after', this.loading)
        // console.log('finished', this.finished)
      } catch (err) {
        // 出错了
        this.error = true
      }
    },
    async onRefresh () {
      // refresh和list结合使用，那么就无需再去写一遍加载的代码了，
      // 通过refresh触发load实现就行了
      this.list = []
      this.page = 0
      this.onload().then(() => {
        this.isRefreshing = false
      })
    }
  },
  created () {
    this.getTheList()
  }
}
</script>
<style scoped lang="less">
//  .home-container{
//   //  padding-top: 46px;
//   // padding-bottom: 50px; // 防止底部和头部两个fixed组件遮挡
//   // 当然，直接设置placeholde也可以
//  /deep/.van-nav-bar{
//   //  之前之所以不成功，是因为van-nav-bar这个组件并不属于第三方内部标签，可能是个动态生成于外部的标签，因此它不用deep就能访问到，加了deep反而访问不到
//   // 到底加不加deep，就看你socped之后，审查元素的时候，是否有data-v-xxxx这个自定义属性，有就无需deep，无就需要deep，
//   // 评判是否需要deep不是看标签名是否像是第三方的标签，而是看这个新加的属性
//   // 最新：加了placeholder之后就变成内部标签了....好气
//      background-color: dodgerblue;
//   }
// /deep/ .van-nav-bar__title {
//    color: white ;
// }
//  }

</style>
